<template>
  <div>
    <div>
      <!-- 修改/添加模态框 -->
      <div align="center" style="margin: 20px;">
        <el-row>
          <el-col :span="10" :offset="1">
            <div align="left" style="line-height: 20px;margin-top: 20px;">
            	 <el-button type="primary" @click="insert">添加用户</el-button>
            </div>
            <el-dialog :title="title" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="用户名:" :label-width="formLabelWidth">
                  <el-input v-model="form.usname"></el-input>
                </el-form-item>
                <el-form-item label="密码:" :label-width="formLabelWidth" v-show="type==1">
                  <el-input v-model="form.uspass"></el-input>
                </el-form-item>
                <el-form-item label="手机号码:" :label-width="formLabelWidth">
                  <el-input v-model="form.usphone"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码:" :label-width="formLabelWidth">
                  <el-input v-model="form.uscard"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                 <el-button @click="dialogFormVisible = false">取 消</el-button>
                 <el-button type="primary" @click="tijiao">确 定</el-button>
              </div>
            </el-dialog>
          </el-col>
        </el-row>
      </div>
      <!-- 查询出的用户 -->
      <div align="center">
        <el-row>
          <el-col :span="22" :offset="1">
            <div class="listbody">
              <el-table :data="accountdata" stripe style="width: 100%">
                <el-table-column prop="usimg" label="头像" width="150">
                  <template slot-scope="scope">
                    <div class="block">
                      <el-avatar :size="50" :src="scope.row.usimg"></el-avatar>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="usname" label="用户名" width="150">
                </el-table-column>
                <el-table-column prop="usphone" label="注册手机" width="160">
                </el-table-column>
                <el-table-column prop="uscard" label="身份证" width="180">
                </el-table-column>
                <el-table-column prop="ustype" label="账号状态" width="180">
                </el-table-column>
                <el-table-column prop="uscz" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="bianji(scope.row.usid)">编辑</el-button>
                    <br />
                    <el-button size="mini" v-if="scope.row.ustype==1" @click="limit(scope.row)">禁止</el-button>
                    <el-button size="mini" v-else @click="start(scope.row)">启用</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 分页 -->
      <div align="center" style="margin-top: 30px;">
        <el-pagination background layout="prev, pager, next" :total="paging.count" :current-page.sync="paging.page"
          :pager-count='5' :page-count="paging.pagemax" :page-size="paging.pagesize" @current-change="accountAll()">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  var _this;
  export default {
    created() {
      _this = this,
        this.accountAll(),
        this.usid = localStorage.getItem("usid");
    },
    data() {
      return {
        usid: "",
        thisid:"",
        imgUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        dialogVisible: false,
        accountdata: [],
        dialogTableVisible: false,
        dialogFormVisible: false,
        form: {
          usname: '',
          uspass: '',
          usphone: '',
          uscard: '',
          delivery: false,
        },
        paging: {
          page: 1,
          pagesize: 6,
          count: 0,
          pagemax: 0
        },
        formLabelWidth: '120px',
        title: "账号维护",
        type: 0,
        usetype: 1,
      }
    },
    methods: {
      insert() {
        this.dialogFormVisible = true
        this.title = "账号添加"
        this.type = 1
      },
      bianji(ussid) {
        this.dialogFormVisible = true
        this.title = "修改账户"
        this.type = 0
        this.thisid=ussid
      },
      accountAll() {
        _this.$axios.post(
            "/Account/accountAll", {
              page: _this.paging.page,
              pagesize: _this.paging.pagesize
            }
          )
          .then(function(accountdata) {
            console.log(accountdata.data)
            // for (let i in accountdata.data) {
            //   // if (accountdata.data[i].ustype == 0) {
            //   //   accountdata.data[i].ustype = "启用"
            //   // } else {
            //   //   accountdata.data[i].ustype = "禁用"
            //   // }
            // }
            _this.accountdata = accountdata.data.users
            _this.paging = accountdata.data.pages
          })
          .catch(function(err) {
            console.log(err)
          })
      },
      tijiao() {
        if (_this.title == "账号添加") {
          _this.insertuser()
        } else if (_this.title == "修改账户") {
          _this.updateuser()
        }
      },
      insertuser() {
        this.dialogFormVisible = false
        _this.$axios.post(
            "/Account/insert", {
              usname: _this.form.usname,
              uspass: _this.form.uspass,
              usphone: _this.form.usphone,
              uscard: _this.form.uscard,
            }
          )
          .then(function(accountdata) {
            alert("添加成功")
            console.log(accountdata.data)
          })
          .catch(function(err) {
            console.log(err)
          })
      },
      updateuser() {
        this.dialogFormVisible = false
        _this.$axios.post(
            "/Account/update", {
              usid: _this.thisid,
              usname: _this.form.usname,
              usphone: _this.form.usphone,
              uscard: _this.form.uscard,
            })
          .then(function(param) {
            console.log(param)
            if (param.data = "okk") {
              alert("修改账户成功！")
              _this.accountAll()
            }
          }).catch(function(err) {
            console.log(err)
          })
      },
      limit(obj) {
        obj.ustype = 0
      },
      start(obj) {
        obj.ustype = 1
      },
    }
  }
</script>

<style>
  .listbody {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;

  }

  .listbody .account {
    width: 15.5%;
    padding: 10px 20px 20px 20px;
    border: 1px solid #f2f2f2;
    margin-top: 15px;
    cursor: pointer;
  }

  .listbody .account img {
    width: 100%;
    height: 220px;
  }

  .listbody .account div {
    margin-top: 8px;
  }

  .pj {
    color: #2272cb;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
    border-top: 1px solid #f2f2f2;
    padding-top: 10px;
  }

  .listbody .account:hover {
    border-color: #fe7631;
  }
</style>
